<template>
    <div class="user-list-container">
        <!-- 页面标题 -->
        <div class="header-title">用户管理</div>

        <!-- 查询与筛选区域 -->
        <el-form :inline="true" class="filter-form" size="small">
            <el-form-item>
                <el-input placeholder="用户账号/ID/手机号" v-model="filters.keyword" clearable />
            </el-form-item>
            <el-form-item>
                <el-select placeholder="会员等级" v-model="filters.level" clearable style="width: 150px">
                    <el-option label="普通会员" value="普通会员" />
                    <el-option label="黄金会员" value="黄金会员" />
                    <el-option label="白金会员" value="白金会员" />
                    <el-option label="钻石会员" value="钻石会员" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select placeholder="用户标签" v-model="filters.tag" clearable style="width: 150px">
                    <el-option label="标签1" value="tag1" />
                    <el-option label="标签2" value="tag2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="注册渠道" v-model="filters.channel" clearable />
            </el-form-item>
            <el-form-item>

                <el-date-picker v-model="filters.CreateTime" type="date" placeholder="注册时间" clearable style="width: 150px"/>至
                <el-date-picker v-model="filters.EndTime" type="date" placeholder="注册时间" clearable style="width: 150px"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="onReset">重置</el-button>
                <el-link type="primary" style="margin-left: 8px">高级筛选</el-link>
            </el-form-item>
        </el-form>

        <!-- 操作按钮 -->
        <div class="action-btns" style="margin-bottom: 16px;">
            <el-button>添加标签</el-button>
            <el-button>导出数据</el-button>
        </div>

        <!-- 用户数据表格 -->
        <el-table :data="userList" border stripe style="width: 100%" @selection-change="onSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column prop="idNumber" label="ID编号" />
            <el-table-column prop="userNumber" label="用户账号" />
            <el-table-column prop="memberLevel" label="会员等级" />
            <el-table-column prop="userStatus" label="用户状态">
                <template #default="scope">
                    <span class="status-dot">
                        <span v-if="scope.row.userStatus === 1">
                            <span class="dot"></span>启用
                        </span>
                        <span v-else>
                            <span class="dot2"></span>禁用
                        </span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="orderList" label="订单记录">
                <template #default="scope">
                    <el-link type="primary">{{ scope.row.orderList }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="consumptionSum" label="消费金额">
                <template #default="scope">
                    ￥{{ Number(scope.row.consumptionSum).toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column prop="availableIntegral" label="可用积分" width="100" />
            <el-table-column label="操作" width="240">
                <template #default="scope">
                    <el-button size="small" type="primary" plain @click="ShowDetail(scope.row)">详情</el-button>
                    <el-button size="small" type="primary" plain @click="UpdateUser(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" plain @click="deleteUser(scope.row.idNumber)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style=" margin-top: 10px;">
            <el-pagination v-model:current-page="Pageinfo.pageIndex" v-model:page-size="Pageinfo.pageSize"
                :page-sizes="[2, 3, 5, 10]" :size="Pageinfo.pageSize" :disabled="false" :background="true"
                layout="total,slot" :total="Pageinfo.totalCount" prev-text="上一页" next-text="下一页">
                第{{ Pageinfo.pageIndex }}/{{ Pageinfo.pageCount }}页
            </el-pagination>

            <el-pagination v-model:current-page="Pageinfo.pageIndex" v-model:page-size="Pageinfo.pageSize"
                :page-sizes="[2, 3, 5, 10]" :size="Pageinfo.pageSize" :disabled="false" :background="true"
                layout=" sizes,slot, prev, pager, next" :total="Pageinfo.totalCount" prev-text="上一页" next-text="下一页">
                <el-button :disabled="Pageinfo.pageIndex == 1" @click="Pageinfo.pageIndex = 1">首页</el-button>
            </el-pagination>

            <el-pagination v-model:current-page="Pageinfo.pageIndex" v-model:page-size="Pageinfo.pageSize"
                :page-sizes="[2, 3, 5, 10]" :size="Pageinfo.pageSize" :disabled="false" :background="true"
                layout="slot, jumper" :total="Pageinfo.totalCount" prev-text="上一页" next-text="下一页">
                <el-button :disabled="Pageinfo.pageIndex == Pageinfo.pageCount"
                    @click="Pageinfo.pageIndex = Pageinfo.pageCount">尾页</el-button>
            </el-pagination>
        </el-row>

        <!-- 用户编辑 -->
        <el-dialog v-model="editDialogVisible" title="修改资料" width="500px" :close-on-click-modal="false">
            <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="90px">
                <el-form-item label="用户账号" prop="userNumber" required>
                    {{ editForm.userNumber }}
                </el-form-item>
                <el-form-item label="手机号" prop="phoneNumber" required>
                    <el-input v-model="editForm.phoneNumber" />
                </el-form-item>
                <el-form-item label="会员等级" prop="memberLevel" required>
                    <el-radio-group v-model="editForm.memberLevel">
                        <el-radio-button label="普通会员" value="普通会员" />
                        <el-radio-button label="黄金会员" value="黄金会员" />
                        <el-radio-button label="白金会员" value="白金会员" />
                        <el-radio-button label="钻石会员" value="钻石会员" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="性别" prop="sex" required>
                    <el-radio-group v-model="editForm.sex">
                        <el-radio label="男" :value="1" />
                        <el-radio label="女" :value="0" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="生日" prop="birthday" required>
                    <el-date-picker v-model="editForm.birthday" type="date" placeholder="选择日期" style="width: 100%;" />
                </el-form-item>
                <el-form-item label="所在城市" prop="liveCity" required>
                    <el-input v-model="editForm.liveCity" />
                </el-form-item>
                <el-form-item label="职业" prop="occupation" required>
                    <el-input v-model="editForm.occupation" />
                </el-form-item>
                <el-form-item label="个性签名" prop="personalizedDesc" required>
                    <el-input v-model="editForm.personalizedDesc" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveEdit">保存</el-button>
            </template>
        </el-dialog>

        <!-- 用户详情 -->
        <el-dialog v-model="detailDialogVisible" title="用户详情" width="400px" :close-on-click-modal="false">
            <el-form :model="detailForm" label-width="90px" class="detail-form">
                <el-form-item label="用户账号">
                    <span>{{ detailForm.userNumber }}</span>
                </el-form-item>
                <el-form-item label="手机号">
                    <span>{{ detailForm.phoneNumber }}</span>
                </el-form-item>
                <el-form-item label="会员等级">
                    <span>{{ detailForm.memberLevel }}</span>
                </el-form-item>
                <el-form-item label="性别">
                    <span>{{ Number(detailForm.sex) === 1 ? '男' : Number(detailForm.sex) === 0 ? '女' : '' }}</span>
                </el-form-item>
                <el-form-item label="生日">
                    <span>{{ detailForm.birthday }}</span>
                </el-form-item>
                <el-form-item label="所在城市">
                    <span>{{ detailForm.liveCity }}</span>
                </el-form-item>
                <el-form-item label="职业">
                    <span>{{ detailForm.occupation }}</span>
                </el-form-item>
                <el-form-item label="个性签名">
                    <span>{{ detailForm.personalizedDesc }}</span>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="detailDialogVisible = false">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from 'vue'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'
import { UserDelete, UserList, UserUpdate } from '@/Api/user'
import moment from 'moment'

//查询条件信息
const filters = ref({
    keyword: '',
    level: '',
    tag: '',
    channel: '',
    CreateTime: '',
    EndTime: ''
})

//分页条件信息
const Pageinfo = reactive({
    pageIndex: 1,
    pageSize: 10,
    totalCount: 0,
    pageCount: 0
})

//接收用户列表
const userList = ref([{}])

//编辑用户弹窗
const editDialogVisible = ref(false)
const editFormRef = ref() // 新增表单ref

const editForm = reactive({
    userNumber: '',
    idNumber: '',
    phoneNumber: '',
    memberLevel: '',
    sex: '',
    birthday: '',
    liveCity: '',
    occupation: '',
    personalizedDesc: ''
})

// 编辑表单校验规则
const editRules = reactive({
    userNumber: [
        { required: true, message: '请输入用户账号', trigger: 'blur' }
    ],
    phoneNumber: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的11位手机号', trigger: 'blur' }
    ],
    memberLevel: [
        { required: true, message: '请选择会员等级', trigger: 'change' }
    ],
    sex: [
        { required: true, message: '请选择性别', trigger: 'change' }
    ],
    birthday: [
        { required: true, message: '请选择生日', trigger: 'change' }
    ],
    liveCity: [
        { required: true, message: '请输入所在城市', trigger: 'blur' }
    ],
    occupation: [
        { required: true, message: '请输入职业', trigger: 'blur' }
    ],
    personalizedDesc: [
        { required: true, message: '请输入个性签名', trigger: 'blur' }
    ]
})

//编辑用户
const UpdateUser = (row: any) => {
    editDialogVisible.value = true
    editForm.userNumber = row.userNumber
    editForm.idNumber = row.idNumber
    editForm.phoneNumber = ""
    editForm.memberLevel = ""
    editForm.sex = ""
    editForm.birthday = ""
    editForm.liveCity = ""
    editForm.occupation = ""
    editForm.personalizedDesc = ""
}

// 新增详情弹窗
const detailDialogVisible = ref(false)
const detailForm = reactive({
    userNumber: '',
    phoneNumber: '',
    memberLevel: '',
    sex: '',
    birthday: '',
    liveCity: '',
    occupation: '',
    personalizedDesc: ''
})

//用户详情
const ShowDetail = (row: any) => {
    detailDialogVisible.value = true
    detailForm.userNumber = row.userNumber
    detailForm.phoneNumber = row.phoneNumber
    detailForm.memberLevel = row.memberLevel
    detailForm.sex = row.sex
    detailForm.birthday = moment(row.birthday).format('YYYY-MM-DD')
    detailForm.liveCity = row.liveCity
    detailForm.occupation = row.occupation
    detailForm.personalizedDesc = row.personalizedDesc
}

//获取用户列表
const getUserList = async () => {
    var params = {
        pageIndex: Pageinfo.pageIndex,
        pageSize: Pageinfo.pageSize,
        IDNumber: filters.value.keyword,
        MemberLevel: filters.value.level,
        CreateTime: filters.value.CreateTime,
        EndTime: filters.value.EndTime
    }
    const response = await UserList(params)

    userList.value = response.data.data.pageData
    Pageinfo.totalCount = response.data.data.totalCount
    Pageinfo.pageCount = response.data.data.pageCount
}


//查询
const onSearch = () => {
    getUserList();
}
//重置
const onReset = () => {
    filters.value = { keyword: '', level: '', tag: '', channel: '', CreateTime: '', EndTime: '' }
    getUserList();
}
const onSelectionChange = (val: any) => {
    // 多选逻辑
}
//监听分页
watch(Pageinfo, () => {
    getUserList();
}, { deep: true })

//保存编辑
const saveEdit = () => {
    editFormRef.value.validate(async (valid: any) => {
        if (valid) {
            // 实现保存编辑的逻辑
            const response = await UserUpdate(editForm)
            ElMessage.success("编辑成功!")
            editDialogVisible.value = false
            getUserList();
        }
    })
}

//删除用户
const deleteUser = async (id: any) => {
    ElMessageBox.confirm(
        '确定要删除该用户吗？此操作不可撤销！',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        // 调用后端接口删除
        await UserDelete(id)
        ElMessage.success('删除成功！')
        getUserList()
    }).catch(() => {
        // 用户取消，无需处理
    })
}

//钩子
onMounted(() => {
    getUserList();
})

</script>

<style scoped>
.user-list-container {
    background: #fff;
    padding: 2% 3%;
    border-radius: 0.5em;
}

.header-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 2%;
}

.filter-form {
    margin-bottom: 1.5%;
}

.action-btns {
    margin-bottom: 1.5%;
}

.status-dot {
    display: flex;
    align-items: center;
    font-size: 15px;
}

.status-dot .dot {
    width: 8px;
    height: 8px;
    background: #13ce66;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.status-dot .dot2 {
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.main-container {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    /* 可根据需要加padding: 2% 3%; */
}

.login-card {
    width: 90%;
    max-width: 420px;
    padding: 3% 2.5% 2% 2.5%;
    border-radius: 1em;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
}

.detail-form .el-form-item__label {
    color: #666;
    font-weight: bold;
}

.detail-form .el-form-item {
    margin-bottom: 12px;
}
</style>
